<template>
  <div style="width: 100%; height: 100%">
    <div id="map" class="map" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import '@/style/ol.css';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import MultiPoint from 'ol/geom/MultiPoint';
import Polygon from 'ol/geom/Polygon.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector.js';
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';

import Style from 'ol/style/Style.js';
import Stroke from 'ol/style/Stroke.js';
import Text from 'ol/style/Text.js';
import Icon from 'ol/style/Icon.js';
import Fill from 'ol/style/Fill.js';

import * as charts from "echarts";
import {fromLonLat} from 'ol/proj';


export default {
    name: 'OpenLayersMap',
    components: {},
    data() {
        return {
            map: null,
            keyword: null
        };
    },
    mounted() {
        setTimeout(()=>{
            this.initMap();
        }, 500);
    },
    methods: {
        initMap() {

            // 背景样式
            let bg_style = new Style({
                stroke: new Stroke({
                    color: 'blue',
                    width: 1
                }),
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.5)'
                })
            });

            //背景数据
            let bg_feature = new Feature({
                geometry: new Polygon([
                    [[8500000, 6000000], [8500000, 2000000], [15000000, 2000000], [15000000, 6000000]]
                ])
            });

            bg_feature.setStyle(bg_style);

            // 背景图层
            let bg_vector = new LayerVector({
                source: new SourceVector()
            });
            bg_vector.getSource().addFeature(bg_feature);

            // 普通图片URL
            const imageUrl = '/static/img/bianpo.jpg';

            // 普通图片大小
            // const size = [1024, 512];
            const size = [2000, 1300];

            // 创建ImageLayer并添加到地图
            const imageLayer = new ImageLayer({
                source: new ImageStatic({
                    url: imageUrl,
                    imageExtent: [8500000, 2000000, 15000000, 6000000],
                    imageSize: size,
                }),
            });


            // 数据
            let layerVector = new LayerVector({
                source: new SourceVector()
            });

            let map = new Map({
                view: new View({
                    center: [12250000, 4000000],
                    zoom: 4
                }),
                layers: [
                    imageLayer
                    , bg_vector
                    , layerVector
                ],
                target: 'map',
            });

            this.map = map;

            // GNSS
            // let icon ="";
            // 钢筋计
            // let icon ="";
            // 倾角仪
            let icon = "";

            let background = "";

            //样式
            let iconStyle = [
                new Style({
                    //背景图标
                    image: new Icon({
                        src: background
                    })
                    // 文本样式
                    , text: new Text({
                        text: '传感器',
                        offsetY: '16',
                        textAlign: "center",
                        font: '12px serif',
                        fill: new Fill({
                            color: '#FFF'
                        })
                        , backgroundFill: new Fill({
                            color: 'rgba(0, 0, 0, 1)', // 背景颜色
                        }),
                    })
                })
                , new Style({
                    //背景图标
                    image: new Icon({
                        src: icon
                        , anchorOrigin: 'top-center'
                        , size: [30, 148]
                        , scale: 0.5
                    })
                })
            ];

            //特征点
            let pointFeature = new Feature({
                geometry: new MultiPoint([[14207953.90, 4070814.25], [13565735.100837432, 4070814.25], [11441793.446422558, 4070814.25]])
            });

            pointFeature.setStyle(iconStyle);

            layerVector.getSource().addFeature(pointFeature);


            map.on('click', function (evt) {
                let coordinate = evt.coordinate;
                console.log('click: ' + coordinate);

                map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                    const geo = feature.getGeometry();
                    if (geo instanceof MultiPoint) {
                        Layers.succeed('功能建设中！');
                    }
                });
            });
        }
    },
};
</script>

<style>
.map {
    width: 100%;
    height: 400px;
}
</style>